<template>
  <v-content >
    <v-miaoScroll :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'resoulist', name: 'content' }" style="background-color: #ffffff;">
      <div class="mw-column-style">
        <img src="/static/resou_head.png" style="width:3.75rem;height:1.88rem;object-fit:cover;"/>
        <div v-for="(item,index) in data.list.slice(0,50)" class="mw-main-background-white">
          <div @click="data.skipToArticle(item.article_id)" class="mw-row-spacebetween-style" style="align-items: center;height:0.43rem;padding:0 0.15rem;">
            <div class="mw-row-style" style="align-items: center">
              <div style='display: block;width: 0.17rem;text-align: center;color: #FFCF0F;font-size: 0.15rem;font-style: italic;'>{{index + 1}}</div>
              <div class="mw-single-line mw-first-text-color" style='font-size: 0.15rem;line-height:0.21rem;width:2.2rem'>{{item.name}}</div>
            </div>
            <div class="mw-row-style mw-third-text-color " style="align-items: center;font-size: 0.13rem;">
              <div >为您推荐</div>
              <div class="mw-main-red">{{item.goods_total}}</div>
              <div>个商品</div>
            </div>
          </div>
          <div class="mw-horizon-divider" style="width: 3.75rem;"></div>
        </div>
        <div class="mw-third-text-color" style="width: 3.6rem;background-color: #f5f5f5;height:0.4rem;line-height: 0.4rem;padding-left:0.15rem;font-size: 0.15rem;">历史热搜</div>
        <div v-for="(item,index) in data.list.slice(50,data.list.length)" class="mw-main-background-white">
          <div @click="data.skipToArticle(item.article_id)" class="mw-row-spacebetween-style" style="align-items: center;height:0.43rem;padding:0 0.15rem;">
            <div class="mw-row-style" style="align-items: center">
              <img src="/static/resou_history_icon.png" style="width:0.16rem;height:0.16rem;object-fit: cover;margin-right:0.1rem;"/>
              <div class="mw-single-line mw-first-text-color" style='font-size: 0.15rem;line-height:0.21rem;width:2.2rem'>{{item.name}}</div>
            </div>
            <div class="mw-row-style mw-third-text-color " style="align-items: center;font-size: 0.13rem;">
              <div >为您推荐</div>
              <div class="mw-main-red">{{item.goods_total}}</div>
              <div>个商品</div>
            </div>
          </div>
          <div class="mw-horizon-divider" style="width: 3.75rem;"></div>
        </div>
      </div>
    </v-miaoScroll>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'resoulist'}),
      mapRules({store: [{ path: 'resoulist' }],need: [{ path: 'resoulist' }]}),
    ],
    components: {

    },
    data() {
      return {

      }
    },
    methods: {

    },

    created() {

    },

    mounted() {
      this.data.needFetch = true
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
